<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <style>

        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body class="gray-bg" >
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> <span th:text="${course.name}"></span>
            </div>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
                        class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                        class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新"><i class="fa fa-refresh"></i>
                </button>
            </div>
        </div>
        <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>

<div class="ui-layout-center">
    <div class="gray-bg" style="height: 100%">
        <!--右侧部分开始-->

        <div class="row content-tabs">
<!--            <button class="roll-nav roll-left tabLeft">-->
<!--                <i class="fa fa-backward"></i>-->
<!--            </button>-->
            <nav class="page-tabs menuTabs">
                <div class="page-tabs-content">
                    <a href="javascript:;" class="active menuTab" th:data-id="@{'/school/chapter/student_chapter_main/'+${course.id}}">首页</a>
                </div>
            </nav>0
<!--            <button class="roll-nav roll-right tabRight">-->
<!--                <i class="fa fa-forward"></i>-->
<!--            </button>-->
<!--            <a href="javascript:void(0);" class="roll-nav roll-right tabReload"><i class="fa fa-refresh"></i> 刷新</a>-->
        </div>

<!--        <a id="ax_close_max" class="ax_close_max" href="#" title="关闭全屏"> <i class="fa fa-times-circle-o"></i> </a>-->

        <div class="mainContent2" id="content-main" th:classappend="${mainClass}" style="height: 100%;" >
            <iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100%"
                    th:data-id="@{'/school/chapter/student_chapter_main/'+${course.id}}"
                    th:src="@{'/school/chapter/student_chapter_main/'+${course.id}}" frameborder="0" seamless></iframe>
        </div>

    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
    var resetPwdFlag = [[${@permission.hasPermi('system:user:resetPwd')}]];
    var prefix = ctx + "system/user";

    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 250});
        // 回到顶部绑定
        if ($.fn.toTop !== undefined) {
            var opt = {
                win: $('.ui-layout-center'),
                doc: $('.ui-layout-center')
            };
            $('#scroll-up').toTop(opt);
        }

        queryChapterTree();
    });


    function queryChapterTree() {
        var url = ctx + "school/chapter/treeData/[[${course.id}]]";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick2
        };

        $.tree.init(options);

        function zOnClick2(event, treeId, treeNode) {
            console.log(treeNode.id);
            // $("#deptId").val(treeNode.id);
            // $("#parentId").val(treeNode.pId);
            // $.table.search();

            // 在右侧打开窗口(当前)
            showChapter(treeNode.id,treeNode.name);
        }
    }


    $('#btnExpand').click(function () {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function () {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function () {
        queryDeptTree();
    });

    function showChapter(chapterId,chapterName)
    {
        // 如果当前右侧有,则刷新
        // 如果当前右侧没有,则新添加一个

        dataUrl = "/school/chapter/student_chapter_detail/"+chapterId;
        dataIndex = chapterId;
        menuName =  chapterName;
            // "iframe"+dataIndex;

        var str = '<a href="javascript:;" onclick="activeTab(this)" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle" onclick="closeTab(this)"></i></a>';
        $('.menuTab').removeClass('active');

        // 添加选项卡对应的iframe
        var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
        $('.mainContent2').find('iframe.RuoYi_iframe').hide().parents('.mainContent2').append(str1);

        // 添加选项卡
        $('.menuTabs .page-tabs-content').append(str);
        scrollToTab($('.menuTab.active'));
    }

    // 点击选项卡菜单
    function activeTab(alink)
    {
        _this  = alink;

        console.log("activeTab()");
        console.log(_this);

        if (!$(_this).hasClass('active')) {

            var currentId = $(_this).data('id');
            console.log("currentId"+currentId);
            // syncMenuTab(currentId);
            // // 显示tab对应的内容区
            $('.mainContent2 .RuoYi_iframe').each(function(i,o) {
                console.log(i+":"+o);
                if ($(o).data('id') == currentId) {
                    $(o).show().siblings('.RuoYi_iframe').hide();
                    return false;
                }
            });
            // 激活当前tab,其他取消
            $(_this).addClass('active').siblings('.menuTab').removeClass('active');
            // scrollToTab(this);
        }
    }

    // 关闭选项卡菜单
    function closeTab(_this) {

        console.log("closeTab()");
        var closeTabId = $(_this).parents('.menuTab').data('id');

        // 激活前面那个
        var activeId = $(_this).parents('.menuTab').prev('.menuTab:last').data('id');
        $(_this).parents('.menuTab').prev('.menuTab:last').addClass('active');
        $('.mainContent2 .RuoYi_iframe').each(function(i,o) {
            if ($(o).data('id') == activeId) {
                $(o).show().siblings('.RuoYi_iframe').hide();
                return false;
            }
        });

        //  移除当前选项卡
        $(_this).parents('.menuTab').remove();

        // 移除相应tab对应的内容区
        $('.mainContent2 .RuoYi_iframe').each(function(i,o) {
            if ($(o).data('id') == closeTabId) {
                $(o).remove();
                return false;
            }
        });

        return;

        var currentWidth = $(this).parents('.menuTab').width();
        var panelUrl = $(this).parents('.menuTab').data('panel');
        // 当前元素处于活动状态
        if ($(this).parents('.menuTab').hasClass('active')) {

            // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
            if ($(this).parents('.menuTab').next('.menuTab').length) {

                var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
                $(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');

                $('.mainContent .RuoYi_iframe').each(function() {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.RuoYi_iframe').hide();
                        return false;
                    }
                });

                var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
                if (marginLeftVal < 0) {
                    $('.page-tabs-content').animate({ marginLeft: (marginLeftVal + currentWidth) + 'px' }, "fast");
                }

                //  移除当前选项卡
                $(this).parents('.menuTab').remove();

                // 移除tab对应的内容区
                $('.mainContent .RuoYi_iframe').each(function() {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });
            }

            // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
            if ($(this).parents('.menuTab').prev('.menuTab').length) {
                var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
                $(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
                $('.mainContent .RuoYi_iframe').each(function() {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.RuoYi_iframe').hide();
                        return false;
                    }
                });

                //  移除当前选项卡
                $(this).parents('.menuTab').remove();

                // 移除tab对应的内容区
                $('.mainContent .RuoYi_iframe').each(function() {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });

                if($.common.isNotEmpty(panelUrl)){
                    $('.menuTab[data-id="' + panelUrl + '"]').addClass('active').siblings('.menuTab').removeClass('active');
                    $('.mainContent .RuoYi_iframe').each(function() {
                        if ($(this).data('id') == panelUrl) {
                            $(this).show().siblings('.RuoYi_iframe').hide();
                            return false;
                        }
                    });
                }
            }
        }
        // 当前元素不处于活动状态
        else {
            //  移除当前选项卡
            $(this).parents('.menuTab').remove();

            // 移除相应tab对应的内容区
            $('.mainContent .RuoYi_iframe').each(function() {
                if ($(this).data('id') == closeTabId) {
                    $(this).remove();
                    return false;
                }
            });
        }
        scrollToTab($('.menuTab.active'));
        syncMenuTab($('.page-tabs-content').find('.active').attr('data-id'));
        return false;
    }


</script>
</body>

</html>